<template>
  <div id="homeView">
    <el-row :gutter="20" class="home">
      <el-col :span="8" class="home-left">
        <el-card shadow="hover">
          <div class="user">
            <img :src="getUserImg('user')" class="image" />
            <div class="user-info">
              <p class="user-info-admin">Admin</p>
              <p class="user-info-Admin">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录时间：<span>2023-03-01</span></p>
            <p>上次登录地点：<span>北京</span></p>
          </div>
        </el-card>
        <el-card shadow="hover" class="table-card">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              v-for="(val, key) in tableLabel"
              :key="key"
              :prop="key"
              :label="val"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16" class="home-right">
        <div class="count">
          <el-card
            v-for="item in countData"
            :key="item.name"
            :body-style="{ display: 'flex', padding: 0 }"
            shadow="hover"
          >
            <component
              :is="item.icon"
              class="icons"
              :style="{ background: item.color }"
            ></component>
            <div class="count-detail">
              <p class="num">￥{{ item.value }}</p>
              <p class="txt">￥{{ item.name }}</p>
            </div>
          </el-card>
        </div>
        <el-card class="top-echart">
          <div ref="echart" style="height: 300px; width: 100%"></div>
        </el-card>
        <div class="bottom-echart-container">
          <div class="bottom-echart">
            <el-card class="user-echart">
              <div ref="userEchart" style="height: 260px; width: 100%"></div>
            </el-card>
            <el-card>
              <div ref="videoEchart" style="height: 260px; width: 100%"></div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang='ts'>
import api from "@/api/api";
import * as echarts from "echarts";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";

const getUserImg = (user: string) => {
  return new URL(`../assets/images/${user}.png`, import.meta.url).href;
};
const tableData = ref([]);
const tableLabel = ref({
  name: "课程",
  todayBuy: "今日购买",
  monthBuy: "本月购买",
  totalBuy: "总购买",
});
const countData = ref([]);
const getTableDataFn = async () => {
  const res = await api.getTableData();
  tableData.value = res.data.tableData;
};
const getCountDataFn = async () => {
  const res = await api.getCountData();
  countData.value = res.data;
};
//observer 接收观察器实例对象
const observer = ref(null);
const echart = ref(null); // 声明 echart ref
const userEchart = ref(null);
const videoEchart = ref(null);
//这个是折线图和柱状图 两个图表共用的公共配置
const xOptions = reactive({
  // 图例文字颜色
  textStyle: {
    color: "#333",
  },
  legend: {},
  grid: {
    left: "20%",
  },
  // 提示框
  tooltip: {
    trigger: "axis",
  },
  xAxis: {
    type: "category", // 类目轴
    data: [],
    axisLine: {
      lineStyle: {
        color: "#17b3a3",
      },
    },
    axisLabel: {
      interval: 0,
      color: "#333",
    },
  },
  yAxis: [
    {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#17b3a3",
        },
      },
    },
  ],
  color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
  series: [] as any[],
});

const pieOptions = reactive({
  tooltip: {
    trigger: "item",
  },
  legend: {},
  color: [
    "#0f78f4",
    "#dd536b",
    "#9462e5",
    "#a6a6a6",
    "#e1bb22",
    "#39c362",
    "#3ed1cf",
  ],
  series: [] as any[],
});

const getChartDataFn = async () => {
  const res = await api.getChartData();
  const { orderData, userData, videoData } = res.data;
  xOptions.xAxis.data = orderData.date;
  xOptions.series = Object.keys(orderData.data[0]).map((val) => {
    return {
      name: val,
      data: orderData.data.map((item) => item[val]),
      type: "line",
    };
  });
  const oneEchart = echarts.init(echart.value);
  oneEchart.setOption(xOptions);

  xOptions.xAxis.data = userData.map((item) => item.date);
  xOptions.series = [
    {
      name: "新增用户",
      data: userData.map((item: { new: any }) => item.new),
      type: "bar",
    },
    {
      name: "活跃用户",
      data: userData.map((item) => item.active),
      type: "bar",
    },
  ];
  const twoEchart = echarts.init(userEchart.value);
  twoEchart.setOption(xOptions);

  pieOptions.series = [
    {
      data: videoData,
      type: "pie",
    },
  ];

  const threeEchart = echarts.init(videoEchart.value);
  threeEchart.setOption(pieOptions);

  // 关键：强制resize
  setTimeout(() => {
    oneEchart.resize();
    twoEchart.resize();
    threeEchart.resize();
  }, 0);
  window.addEventListener("resize", () => {
    oneEchart.resize();
    twoEchart.resize();
    threeEchart.resize();
  });
};
onMounted(() => {
  getTableDataFn();
  getCountDataFn();
  getChartDataFn();
});
</script>

<style scoped>
#homeView {
  height: 100%;

}
.home {
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
}
.home-left {
  margin-top: 50px;
  margin-left: 15px;
  flex: 0 0 40%; /* 左侧占40%宽度 */
  max-width: 450px; /* 可选，防止过宽 */
  min-width: 300px; /* 可选，防止过窄 */
  display: flex;
  flex-direction: column;
}
.user {
  display: flex;
  justify-items: center;
  border-bottom: 1px solid #ccc;
}
.user .image {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin-right: 40px;
  margin-bottom: 20px;
}
.user .user-info {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-top: 22px;
  line-height: 35px;
}
.user .user-info-admin {
  font-size: 35px;
}
.user .user-info-Admin {
  font-size: 15px;
  color: #999;
}
.login-info {
  margin-top: 30px;
  font-size: 15px;
  color: #999;
}
.login-info p {
  line-height: 30px;
}
.login-info p span {
  color: #666;
  margin-left: 60px;
}
.table-card {
  margin-top: 20px;
  max-height: 400px; /* 你可以根据实际内容调整 */
  overflow: auto;
}
.home-right {
  flex: 1; /* 右侧自适应剩余空间 */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: auto;
}
.count {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
  padding-right: 20px;
}
.count .el-card {
  width: 32%;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.icons {
  width: 30px;
  height: 30px;
  font-size: 40px;
  color: #fff;
  padding: 20px;
}
.count-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 15px;
}
.count-detail .num {
  font-size: 30px;
  margin-bottom: 10px;
}
.count-detail .txt {
  font-size: 15px;
  color: #999;
}

.top-echart {
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 0 24px;
}

.bottom-echart {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 300px; /* 最小高度保证内容可见 */
}
.bottom-echart .el-card {
  width: 48%;
  box-sizing: border-box;
  padding: 16px 20px;
}
/* 新增的滚动容器 */
.bottom-echart-container {
  flex: 1;
  overflow-y: auto; /* 添加垂直滚动 */
  margin-top: 20px;
  min-height: 300px; /* 最小高度保证内容可见 */
}



</style>